<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./react18/react.development.js"></script>
    <script src="./react18/react-dom.development.js"></script>
    <script src="./react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      const price = 100;
      const goodName = "Iphone14";
      function fn() {
        return "hello";
      }

      /*
        JSX注意事项:
          * 只能有一个根标签
          * 不要在jsx语法标签的外部书写引号
          * 想要在JSX中混入js语法,需要使用 {}插值语法 混入js(插值语法中只能书写表达式,不能书写语句)(表达式有返回值,语句没有返回值)
          * 插值语法展示数据的规则
            - number,string 直接展示
            - 数组:把数组内部的值直接拼接展示
            - boolean类型,null,undefined,symbol类型:转为空字符串
            - Date对象,正则对象,函数对象,对象类型等都是不支持作为插值语法的值的(报错信息:Objects are not valid as a React child)

      */
      const vDOM = (
        <div>
          <h1>商品是:{goodName}</h1>
          <h1>商品是:{price}</h1>
          <p>{1 + 1}</p>
          <p>{fn()}</p>
          <p>{price > 50 ? "贵了" : "便宜"}</p>
          <p>{"1"}</p>
          <p>{1}</p>
          <p>{[1, 2, 3, 4]}</p>
          <p>{false}</p>
          <p>{true}</p>
          <p>{undefined}</p>
          <p>{null}</p>
          <p>{Symbol()}</p>
        </div>
      );

      ReactDOM.createRoot(document.getElementById("app")).render(vDOM);
    </script>
  </body>
</html>
